<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">


    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}" type="text/css">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}" type="text/css">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}" type="text/css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}" type="text/css">
    <!-- Morris chart -->
    <link rel="stylesheet" th:href="@{/bower_components/morris.js/morris.css}" type="text/css">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/bower_components/jvectormap/jquery-jvectormap.css}" type="text/css">
    <!-- Date Picker -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css}"
          type="text/css">
    <!-- Daterange picker -->
    <link rel="stylesheet" th:href="@{/bower_components/bootstrap-daterangepicker/daterangepicker.css}" type="text/css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" th:href="@{/plugins/iCheck/square/blue.css}" type="text/css">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition register-page">
<div class="register-box">
    <div class="register-logo">
        <b>教育在线</b>
    </div>

    <div class="register-box-body">
        <p class="login-box-msg">注册一个新账户</p>

        <form action="/saveregister" method="post" id="myform">
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="请输入手机号" name="phone"><span id="spanphone"></span>
                <span class="glyphicon glyphicon-phone form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="请输入密码" name="password"><span id="spanpassword"></span>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="请再次输入密码" name="repassword"><span id="spanrepassword"></span>
                <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="请输入手机验证码" name="yanzhenma"><span id="spanyanzhenma"></span>
                <span class="glyphicon glyphicon-bishop form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <a onclick="getAuth()" style="cursor: pointer" id="getcode">获取手机验证码</a><a id="resttime"></a>
                </div>
                <!-- /.col -->
                <div class="col-xs-6">
                    <button type="submit" class="btn btn-primary btn-block btn-flat" onclick="save()">注册</button>
                </div>
                <!-- /.col -->
            </div>
        </form>

        <a href="/login" class="text-center">我已经有账户了</a>
    </div>
    <!-- /.form-box -->
</div>
<!-- jQuery 3 -->
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}" type="text/javascript"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/bower_components/jquery-ui/jquery-ui.min.js}" type="text/javascript"></script>

<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/plugins/iCheck/icheck.min.js}" type="text/javascript"></script>

<script>
    //获取验证码
    function getAuth() {
        var myreg=/^[1][3,4,5,7,8,6][0-9]{9}$/;
        var phone=$("[name=phone]").val();
        if ($("[name=phone]").val() != "") {
            if(!myreg.test(phone)){
                alert("请输入正确的手机号");
            }else{
                //ajax后台查询是否手机号已注册
                $.ajax({
                    url: "/getcode",
                    data:{"phone":phone},
                    type: "POST",
                    success: function (result) {
                        if (result == "0") {
                            alert("成功获取验证码，请注意查收！");
                            settime();
                        } else {
                            alert("获取失败")
                        }
                    }
                });
            }
        } else {
            alert("请先填写手机号！")
        }
    }

    //倒计时代码
    var countdown=60;
    function settime() {
        if (countdown == 0) {
            $("#resttime").text("");
            $("#getcode").text("获取手机验证码");
            countdown = 60;
            return false;
        } else {
            $("#getcode").text("");
            $("#resttime").text("重新发送剩余（"+countdown+"）秒");
            countdown--;
        }
        setTimeout(function() {
            settime();
        },1000);
    }



    //电话验证
    $("[name=phone]").blur(function () {
        var myreg=/^[1][3,4,5,7,8,6][0-9]{9}$/;
        var phone=$("[name=phone]").val();
        if ($("[name=phone]").val() != "") {
            if(!myreg.test(phone)){
                $("[name=phone]").next().text("请输入正确的手机号").css("color", "red");
            }else{
                //ajax后台查询是否手机号已注册
                $.ajax({
                    url: "/solephone",
                    data:{"phone":phone},
                    type: "POST",
                    success: function (result) {
                        if (result != "0") {
                            $("[name=phone]").next().text("手机号已注册！").css("color", "red");
                        } else {
                            $("[name=phone]").next().text("");
                        }
                    }
                });
            }
        } else {
            $("[name=phone]").next().text("不能为空").css("color", "red");
        }
    });

    //密码验证
    $("[name=password]").blur(function () {
        if ($("[name=password]").val() != "") {
            $("[name=password]").next().text("");
        } else {
            $("[name=password]").next().text("不能为空").css("color", "red");
        }
    });

    //两次密码确定
    $("[name=repassword]").blur(function () {
        if ($("[name=repassword]").val() != "") {
            var password=$("[name=password]").val();
            if($("[name=repassword]").val()==password){
                $("[name=repassword]").next().text("");
            }else{
                $("[name=repassword]").next().text("两次密码输入不一致").css("color", "red");
            }
        } else {
            $("[name=repassword]").next().text("不能为空").css("color", "red");
        }
    });

    //验证码验证
    $("[name=yanzhenma]").blur(function () {
        //获得前台输入的验证码
        var preauthcode=$("[name=yanzhenma]").val();
        if ($("[name=yanzhenma]").val() != "") {
            //验证码不为空时，到后台进行比较，返回响应码，为1，提示请先获得验证码
            //为2，提示验证码错误
            //为3，验证码正确，无提示
            $.ajax({
                url: "/comparecode",
                data:{"preauthcode":preauthcode},
                type: "POST",
                success: function (result) {
                    if (result == "1") {
                        $("[name=yanzhenma]").next().text("请先获得验证码！").css("color", "red");
                    } else if(result == "2") {
                        $("[name=yanzhenma]").next().text("输入验证码与手机验证码不匹配！").css("color", "red");
                    } else if(result == "3"){
                        $("[name=yanzhenma]").next().text("");
                    }
                }
            });
        } else {
            $("[name=yanzhenma]").next().text("不能为空").css("color", "red");
        }
    });


    /*保存操作*/
    function save() {
        //拿到表单的值
        var phone=$("[name=phone]").val();
        var password=$("[name=password]").val();
        var repassword=$("[name=repassword]").val();
        var yanzhenma=$("[name=yanzhenma]").val();

        //拿到表单附近的span的判断值
        var spanphone=$("#spanphone").text();
        var spanpassword=$("#spanpassword").text();
        var spanrepassword=$("#spanrepassword").text();
        var spanyanzhenma=$("#spanyanzhenma").text();

        //如果input内容为空阻断提交  如何input后面的span判断有字说明不符合要求，阻断提交
        if (phone == ""||password==""||repassword==""||yanzhenma==""||spanphone!=""||
            spanpassword!=""||spanrepassword!=""||spanyanzhenma!="") {
            $("#myform").bind("submit", (function (e) {
                e.preventDefault();
            }));
            confirm("输入的信息有误，请重新检查");
        } else {
            var r=confirm("确认保存？");
            if(r==true){
                $("#myform").unbind("submit");
            }else{

            }
        }
    }




</script>

<script type="text/javascript">
    <!--下个页面独有的js-->
    var i=[[${i}]];
    if(i==1){
        alert("注册成功！");
    }else {
        alert("注册失败！")
    }

</script>
</body>
</html>
